<!DOCTYPE HTML>
<html>
  <head>
    <style>
body{ background-color: ivory; }
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
canvas{border:1px solid black; background-color: white;}
html, body{
  height:100%;
}
    </style>
  </head>
  <body>
   <div style="float:left;height:612;">
   <input type="file" id="fileInput" multiple="multiple"><br/>
   <ul style="height:612;" id="filesInfo"></ul>
   </div>
    <div>
	<canvas id="imgCanvas" width="512" height="512"></canvas><br/>
	<button id="clockwise">Rotate right</button>
    <button id="counterclockwise">Rotate left</button>
	</div>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
	var fileInput = document.getElementById('fileInput'); 
	var filesInfo = document.getElementById('filesInfo');
	var canvas = document.getElementById('imgCanvas');
    var context = canvas.getContext('2d');
	var smallfiles = [];

	var currentIndex;

      var imageObj = new Image();
      imageObj.onload = function() {
 		context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
		// translate context to center of canvas
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale y component
      context.scale(0.7, 0.7);
		context.drawImage(imageObj,0,0); //,canvas.width * 0.5/4-imageObj.width/2,canvas.height * 0.5/4-imageObj.height/2);
		context.restore();
      };
	  
   
	var angleInDegrees=0;
	$("#clockwise").click(function(){ 
        angleInDegrees+=90;
        //drawRotated(angleInDegrees);
		RotateFile(smallfiles[currentIndex],angleInDegrees);
		loadImg();
    });

    $("#counterclockwise").click(function(){ 
        angleInDegrees-=90;
        //drawRotated(angleInDegrees);
		RotateFile(smallfiles[currentIndex],angleInDegrees);
		loadImg();
    });

    function drawRotated(degrees){
		var scale = 2;
        context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
        context.translate(canvas.width/scale,canvas.height/scale);
        context.rotate(degrees*Math.PI/180);
        context.drawImage(imageObj,-imageObj.width/scale,-imageObj.width/scale);
		var dataURL = canvas.toDataURL("image/jpeg");
		smallfiles[currentIndex] = dataURItoFile(dataURL, smallfiles[currentIndex])
        context.restore();
    }
	

	var result = '';
fileInput.addEventListener('change', function(e) {
	result = ''; 
	smallfiles = [];
	imageObj.src = "" //imagen blanca
	for (i in fileInput.files) {
		var file = fileInput.files[i];
		try{
			if (file.type.match('image.*')) {
			    resizeFile(file);
			} else {
				alert("Only supported images!");
			}
		}
		catch(exception){}
		finally {}
	}
});
$("#filesInfo").on("click","li a", function(){
		currentIndex = $(this).parent().index();
loadImg();
		return false;
  });
  function loadImg()  {
  	 var reader = new FileReader();
		reader.onload = function(e) {
           imageObj.src = reader.result; 
		   //context = canvas.getContext('2d');
         }		 
		 reader.readAsDataURL(smallfiles[currentIndex]);  
  }
 
	function RotateFile(file,degrees) {
    var reader = new FileReader();
    reader.onloadend = function() {	
       var tempImg = new Image();
       tempImg.src = reader.result;
       tempImg.onload = function() {
	   var scale = 2;
        var cnvs = document.createElement('canvas');
        cnvs.width= this.width;
        cnvs.height= this.height;
        var ctx = cnvs.getContext("2d");
		ctx.drawImage(this, 0, 0, this.width, this.height);
		
		ctx.clearRect(0,0,cnvs.width,cnvs.height);
        ctx.save();
		ctx.translate(cnvs.width/scale,cnvs.height/scale);
        ctx.rotate(degrees*Math.PI/180);
		ctx.drawImage(this,-this.width/scale,-this.width/scale);
		ctx.restore();
        
		var dataURL = cnvs.toDataURL("image/jpeg");
		smallfiles[currentIndex] = dataURItoFile(dataURL, file);

      }
   }
   reader.readAsDataURL(file);
}
 
 function resizeFile(file) {
    var reader = new FileReader();
    reader.onloadend = function() {
       var tempImg = new Image();
       tempImg.src = reader.result;
       tempImg.onload = function() {
          var MAX_WIDTH = 1024;
          var MAX_HEIGHT = 768;
          var tempW = tempImg.width;
          var tempH = tempImg.height;
          if (tempW > tempH) {
             if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
          } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }
        var cnvs = document.createElement('canvas');
        cnvs.width = tempW;
        cnvs.height = tempH;
        var ctx = cnvs.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = cnvs.toDataURL("image/jpeg");
		var reducedFile = dataURItoFile(dataURL, file)
		smallfiles.push(reducedFile);
		result += '<li><a href="" >' + file.name + ' </a></li>';
		filesInfo.innerHTML =  result;
      }
   }
   reader.readAsDataURL(file);
}

function dataURItoFile(dataURI, file) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
	var newFile; 
	newFile = new Blob([ia], {type:mimeString});
	newFile.name = file.name;
	return newFile;
}
    </script>
  </body>
</html>  